<template>
  <ClientOnly>
    <div class="example">
      <div class="op-btns example-float-control" @click="toggleSourceVisible()">
        <div v-show="!sourceVisible">
            <ElIcon :size="16" class="op-btn">
              <CaretBottom />
            </ElIcon>
            <span>查看源代码</span>
        </div>
        <div class="copy-btns" v-show="sourceVisible">
          <span class="copy-btns-msg" v-show="isCopy">已复制</span>
          <el-tooltip content="复制代码" placement="top">
            <ElIcon :size="16" class="op-btn" @click="copyCode($event)">
              <CopyDocument />
            </ElIcon>
          </el-tooltip>
          <el-tooltip content="重置代码" placement="top">
            <ElIcon :size="16" class="op-btn" @click="resetCode($event)">
              <Refresh />
            </ElIcon>
          </el-tooltip>
          <el-tooltip content="运行代码" placement="top">
            <ElIcon :size="16" class="op-btn" @click="runCode($event)">
              <VideoPlay />
            </ElIcon>
          </el-tooltip>
        </div>
      </div>
      <ElCollapseTransition>
        <SourceCode v-show="sourceVisible" :source="rawSource" ref="codeEditor" />
      </ElCollapseTransition>
      <Transition name="el-fade-in-linear">
        <div
          v-show="sourceVisible"
          class="example-float-control"
          @click="toggleSourceVisible(false)"
        >
          <ElIcon :size="16">
            <CaretTop />
          </ElIcon>
          <span>隐藏源代码</span>
        </div>
      </Transition>
      <ElDivider class="m-0" />
      <Example :path="path" :rawSource="rawSource" ref="exampleShow"/>
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useClipboard, useToggle } from '@vueuse/core'

import Example from './vp-example.vue'
import SourceCode from './vp-source-code.vue'
import { de } from 'element-plus/es/locale'

const props = defineProps<{
  rawSource: string // 源码
  source: string
  path: string
  description?: string,
}>()

const { copy, isSupported } = useClipboard({
  source: decodeURIComponent(props.rawSource),
  read: false,
})

const [sourceVisible, toggleSourceVisible] = useToggle(true)

let isCopy = ref(false)

const codeEditor = ref()
const exampleShow = ref()

const runCode = (evt) => {
  evt.stopPropagation()
  const rawCode = codeEditor.value.getCode()
  exampleShow.value.runCode(rawCode)
}

const resetCode = (evt) => {
  evt.stopPropagation()
  exampleShow.value.runCode()
}


const copyCode = async (evt) => {
  evt.stopPropagation()
  isCopy.value = true
  if (!isSupported) {
    ElMessage.error('复制失败')
  }
  try {
    await copy(codeEditor.value.getCode())
    setTimeout(() => {
      isCopy.value = false
    }, 500)
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}
</script>
<style lang="scss" scoped>
.example {
  margin-top: 1.5rem;
  border: 2px solid var(--border-color);
  .m-0 {
    margin: 0;
  }
  .copy-btns {
    position: absolute;
    right: 0;
    top: 0.4rem;
    cursor: pointer;
    &-msg {
      display: inline-block;
      float: left;
      margin-top: -0.2rem;
      font-size: 0.9rem;
    }
  }
  .op-btns {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    position: relative;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0;
    .el-icon {
      &:hover {
        color: var(--text-color);
      }
    }

    .op-btn {
      margin: 0 0.5rem;
      cursor: pointer;
      color: var(--text-color-lighter);
      transition: 0.2s;

      &.github a {
        transition: 0.2s;
        color: var(--text-color-lighter);

        &:hover {
          color: var(--text-color);
        }
      }
    }
  }

  &-float-control {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    height: 44px;
    box-sizing: border-box;
    background-color: var(--bg-color, #fff);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: -1px;
    color: var(--el-text-color-secondary);
    cursor: pointer;
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    span {
      font-size: 14px;
      margin-left: 10px;
    }

    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>
